<!--月度接受检查情况统计分析-->
<template>
    <Layout class="menu-left">
        <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                <FormItem label="企业名称：" prop="order">
                    <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                  :currentOrgId="dataToQuery.companyId"
                                  :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label='年度：' prop='year'>
                    <DatePicker class="query-form-el" placeholder="请选择年度" v-model='dataToQuery.yearDate' type="year"></DatePicker>
                </FormItem>
                </Col>
<!--                <Col span="8">
                    <FormItem label="月份：" prop="month" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.monthStart" format="yyyy-MM" type="month" placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                                    @on-change="(date) => { dataToQuery.monthFrom = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthEnd && date.valueOf() > dataToQuery.monthEnd;}}"></DatePicker> -
                        <DatePicker class="query-form-el" v-model="dataToQuery.monthEnd" format="yyyy-MM" type="month" placement="bottom-end" placeholder="请选择月份" style="width: 41%"
                                    @on-change="(date) => { dataToQuery.monthTo = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthStart && date.valueOf() < dataToQuery.monthStart;}}"></DatePicker>
                    </FormItem>
                </Col>  -->
                <Col span="8">
					<Button @click="reset" class="ivu-btn-reset">重置</Button>
					<Button type="primary" class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                </Col> 
            </Row>
        </Form>
		<Row style="margin-right:10px; margin-top: 5px;">
			<Col span="24">
				<Card dis-hover>
				    <div ref="orgTimeContainer" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		<Row style="margin-right:10px; margin-top: 5px;">
			<Col span="24">
				<Card dis-hover>
				    <div ref="infoTimeContainer" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		<Row style="margin-right:10px; margin-top: 5px;">
			<Col span="8">
				<Card dis-hover>
				    <div ref="positionLoseMoneyContainer" style="height: 300px;"></div>
				</Card>
			</Col>
			<Col span="8">
				<Card dis-hover>
				    <div ref="positionZhongContainer" style="height: 300px;"></div>
				</Card>
			</Col>
			<Col span="8">
				<Card dis-hover>
				    <div ref="positionDeadContainer" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		
        <Modal title="安全事故详情" :transfer=false v-model="model1" :width=1200 footer-hide>
            <Table ref='table' :loading="loading" size="small" class="table" :height=500 no-data-text="没有查询到相关数据!"
                   highlight-row stripe border :columns="columns1" width="100%" :data="detailData">
            </Table>
             <Page :total="pagedata.total" :current="pagedata.fromPage" :pageSize="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change='sizeChange' show-total show-sizer show-elevator/>
        </Modal>
    </Layout>
</template>
<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '../../../../common/cacheUtils.js';
	import echarts from 'echarts'
    export default {
        name: "investmentStatistics",
        components:{
            cascaderDom
        },
        data() {
            return{
                ...this.createCommonDataField(),
                // 切换标签
                modaleShow:1,
				currentPosition:"",
				currentType:"",
                // api
				statistical:{},
				loading:false,
				detailData:[],
				pageSizeArray: [10, 20, 50],
				pagedata: {
					total: 0,
					pageSize: 10,
					fromPage: 1,
				},
				model1:false,
				columns1:[
					{
						title: "序号",
						width: 80,
						align: "center",
						fixed: 'left',
						render: (h, params) => {
							return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
						}		
					},
					{
						title: '伤亡人员姓名',
						align: 'center',
						key: 'victim',
						minWidth: 150,
					},
					{
						title: '伤害程度',
						align: 'center',
						key: 'injuryLevelName',
						minWidth: 200,
					},
					{
						title: '歇工天数',
						align: 'center',
						key: 'daysWork',
						minWidth: 150,
					},
					{
						title: '直接经济损失(万元)',
						align: 'center',
						key: 'loseMoney',
						minWidth: 150,
					},
					{
						title: '工种或岗位',
						align: 'center',
						key: 'position',
						minWidth: 150,
					},
					{
						title: '事故时间',
						align: 'center',
						key: 'sartDateStr',
						minWidth: 150,
					},
					{
						title: '事故类别',
						align: 'center',
						key: 'accTypeName',
						minWidth: 150,
					},
					{
						title: '就业类型',
						align: 'center',
						key: 'membershipName',
						minWidth: 150,
					},
					{
						title: '上报单位',
						align: 'center',
						key: 'orgName',
						minWidth: 300,
						ellipsis: true
					},
				]
            }
        },
        mounted(){
            this.query();
        },
        methods: {
            ...pageCommonFunction,
			reset(){
				this.dataToQuery.yearDate = "";
				this.dataToQuery.companyId="";
                this.query();
			},
            query() {
				let orgId = "";
				let reqOrgId = "";
				var date = new Date;
				var year = date.getFullYear(); 
				if(this.dataToQuery.companyId != ""&& this.dataToQuery.companyId != undefined){
					orgId = this.dataToQuery.companyId
					reqOrgId = this.dataToQuery.companyId
				}
				else{
					orgId = sessionStorage('userId').getObject('userId').companyId;
					reqOrgId = "";
				}
				if(this.dataToQuery.yearDate != "" && this.dataToQuery.yearDate != undefined)
					year = this.dataToQuery.yearDate.getFullYear()
				this.$http.get(Api.StatisticsBriefingToOrgTime + "?year="+year+"&orgId="+orgId).then((res) => {
				    if (res.data.status === 201) {
				        this.$Message.error(res.data.msg);
				    }
					this.dataTable = res.data.data;
					this.chartOrgTimeStatistical();
				}).catch(e => {
				    this.$Message.error("数据获取失败")
				})
				this.$http.get(Api.StatisticsBriefingToInfoTime + "?orgId="+ orgId+"&year="+year).then((res) => {
				    if (res.data.status === 201) {
				        this.$Message.error(res.data.msg);
				    }
					this.dataTable = res.data.data;
					this.chartInfoTimeStatistical();
				}).catch(e => {
				    this.$Message.error("数据获取失败")
				})
				this.$http.get(Api.StatisticsBriefingToPosition + "?orgId="+ orgId+"&year="+year).then((res) => {
				    if (res.data.status === 201) {
				        this.$Message.error(res.data.msg);
				    }
					this.dataTable = res.data.data;
					this.chartPositionStatistical();
				}).catch(e => {
				    this.$Message.error("数据获取失败")
				})
            },		
			chartOrgTimeStatistical(){
				this.statistical = {
					orgNames:[],
					dayWorks:[],
					loseMoneys:[],
					qings:[],
					zhongs:[],
					deads:[]
				}
				this.statistical.orgNames = this.dataTable.orgNames;
				this.statistical.dayWorks = this.dataTable.dayWorks;
				this.statistical.loseMoneys = this.dataTable.loseMoneys;
				this.statistical.qings = this.dataTable.qings;
				this.statistical.zhongs = this.dataTable.zhongs;
				this.statistical.deads = this.dataTable.deads;
				let container = echarts.init(this.$refs.orgTimeContainer);
				let option = this.getOrgTimeOption();
				container.setOption(option);
				window.onresize = container.resize;
			},
			chartInfoTimeStatistical(){
				this.statistical = {
					accidents:[],
					dayWorks:[],
					loseMoneys:[],
					times:[]
				}
				this.statistical.accidents = this.dataTable.accidents;
				this.statistical.dayWorks = this.dataTable.dayWorks;
				this.statistical.loseMoneys = this.dataTable.loseMoneys;
				this.statistical.times = this.dataTable.times;
				let container = echarts.init(this.$refs.infoTimeContainer);
				let option = this.getInfoTimeOption();
				container.setOption(option);
				window.onresize = container.resize;
			},
			chartPositionStatistical(){
				this.statistical = {
					loseMoneyPositions:[],
					loseMoneys:[],
					deadPositions:[],
					deads:[],
					zhongPosition:[],
					zhongs:[]
				}
				this.statistical.loseMoneyPositions = this.dataTable.loseMoneyPositions;
				this.statistical.loseMoneys = this.dataTable.loseMoneys;
				this.statistical.deadPositions = this.dataTable.deadPositions;
				this.statistical.deads = this.dataTable.deads;
				this.statistical.zhongPositions = this.dataTable.zhongPositions;
				this.statistical.zhongs = this.dataTable.zhongs;
				{
					let container = echarts.init(this.$refs.positionLoseMoneyContainer);
					let option = this.getLoseMoneyPositionOption();
					container.setOption(option);
					container.on('click', (param)=> {
                        event.stopPropagation()// 阻止冒泡
						this.pagedata = {
							fromPage:1,
							pageSize:10
						};
						this.queryDetail(param.name,param.seriesName);
                    });
					window.onresize = container.resize;
				}
				{
					let container = echarts.init(this.$refs.positionZhongContainer);
					let option = this.getZhongPositionOption();
					container.setOption(option);
					container.on('click', (param)=> {
                        event.stopPropagation()// 阻止冒泡
						this.pagedata = {
							fromPage:1,
							pageSize:10
						};
						this.queryDetail(param.name,param.seriesName);
                    });
					window.onresize = container.resize;
				}
				{
					let container = echarts.init(this.$refs.positionDeadContainer);
					let option = this.getDeadPositionOption();
					container.setOption(option);
					container.on('click', (param)=> {
                        event.stopPropagation()// 阻止冒泡
						this.pagedata = {
							fromPage:1,
							pageSize:10
						};
						this.queryDetail(param.name,param.seriesName);
                    });
					window.onresize = container.resize;
				} 
				
			},
			getOrgTimeOption(){
			    let option = {
			        tooltip: {	//提示框组件
			                trigger: 'axis',
			                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
			                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			                }
			            },
			            legend: {	//图例组件
			                data: ['每年歇工总天数','每年直接经济损失总数','轻伤人数',
							'重伤人数','死亡人数']
			            },
						color:['#FD5C50','#FF9800', '#FDD835', '#40C4FF', '#FF3E80'],
			            grid: {
			                left: '3%',
			                right: '3%',
			                bottom: '8%',
			                containLabel: true,
			            },
						dataZoom: [{
						        type: 'inside'
						    }, {
						        type: 'slider',
								textStyle:false
						    }],
			            xAxis: [
			                {
			                    type: 'category',
								data: this.statistical.orgNames,
								axisLabel: {
									interval: 0,
									formatter:function(value){  
										var str = ""; 
										var num = 6; //每行显示字数 
										var valLength = value.length; //该项x轴字数  
										var rowNum = Math.ceil(valLength / num); // 行数  
										if(rowNum > 1) {
											for(var i = 0; i < rowNum; i++) {
												var temp = "";
												var start = i * num;
												var end = start + num;
												temp = value.substring(start, end) + "\n";
												str += temp; 
											}
											return str;
										} else {
											return value;
										} 
									}
								}
			                }
			            ],
			            yAxis: [
			                {
			                    type: 'value'
			                }
			            ],
			            series: [
			                {
			                    name: '每年歇工总天数',
			                    type: 'bar',
			                    emphasis: {
			                        focus: 'series'
			                    },
			                    data: this.statistical.dayWorks
			                },
							{
							    name: '每年直接经济损失总数',
							    type: 'bar',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.loseMoneys
							},
							{
							    name: '轻伤人数',
							    type: 'bar',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.qings
							},
							{
							    name: '重伤人数',
							    type: 'bar',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.zhongs
							},
							{
							    name: '死亡人数',
							    type: 'bar',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.deads
							}
			            ]
			    };
			    return option;
			},
			getLoseMoneyPositionOption(){
			    let option = {
			        tooltip: {	//提示框组件
			                trigger: 'axis',
			                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
			                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			                }
			            },
			            legend: {	//图例组件
			                data: ['经济损失']
			            },
						color:['#FD5C50'],
			            grid: {
			                left: '3%',
			                right: '3%',
			                bottom: '8%',
			                containLabel: true,
			            },
						dataZoom: [{
						        type: 'inside'
						    }, {
						        type: 'slider',
								textStyle:false
						    }],
			            xAxis: [
			                {
			                    type: 'category',
								data: this.statistical.loseMoneyPositions,
								axisLabel: {
									interval: 0,
									formatter:function(value){  
										var str = ""; 
										var num = 6; //每行显示字数 
										var valLength = value.length; //该项x轴字数  
										var rowNum = Math.ceil(valLength / num); // 行数  
										if(rowNum > 1) {
											for(var i = 0; i < rowNum; i++) {
												var temp = "";
												var start = i * num;
												var end = start + num;
												temp = value.substring(start, end) + "\n";
												str += temp; 
											}
											return str;
										} else {
											return value;
										} 
									}
								}
			                }
			            ],
			            yAxis: [
			                {
			                    type: 'value'
			                }
			            ],
			            series: [
			                {
			                    name: '经济损失',
			                    type: 'bar',
			                    emphasis: {
			                        focus: 'series'
			                    },
			                    data: this.statistical.loseMoneys
			                },
							{
			                    name: '经济损失',
			                    type: 'line',
								smooth: true,
			                    emphasis: {
			                        focus: 'series'
			                    },
			                    data: this.statistical.loseMoneys
			                },
			            ]
			    };
			    return option;
			},
			getZhongPositionOption(){
			    let option = {
			        tooltip: {	//提示框组件
			                trigger: 'axis',
			                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
			                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			                }
			            },
			            legend: {	//图例组件
			                data: ['重伤人数']
			            },
						color:['#FD5C50'],
			            grid: {
			                left: '3%',
			                right: '3%',
			                bottom: '8%',
			                containLabel: true,
			            },
						dataZoom: [{
						        type: 'inside'
						    }, {
						        type: 'slider',
								textStyle:false
						    }],
			            xAxis: [
			                {
			                    type: 'category',
								data: this.statistical.zhongPositions,
								axisLabel: {
									interval: 0,
									formatter:function(value){  
										var str = ""; 
										var num = 6; //每行显示字数 
										var valLength = value.length; //该项x轴字数  
										var rowNum = Math.ceil(valLength / num); // 行数  
										if(rowNum > 1) {
											for(var i = 0; i < rowNum; i++) {
												var temp = "";
												var start = i * num;
												var end = start + num;
												temp = value.substring(start, end) + "\n";
												str += temp; 
											}
											return str;
										} else {
											return value;
										} 
									}
								}
			                }
			            ],
			            yAxis: [
			                {
			                    type: 'value'
			                }
			            ],
			            series: [
							{
							    name: '重伤人数',
							    type: 'bar',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.zhongs
							},
							{
			                    name: '重伤人数',
			                    type: 'line',
								smooth: true,
			                    emphasis: {
			                        focus: 'series'
			                    },
			                    data: this.statistical.zhongs
			                },
			            ]
			    };
			    return option;
			},
			getDeadPositionOption(){
			    let option = {
			        tooltip: {	//提示框组件
			                trigger: 'axis',
			                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
			                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			                }
			            },
			            legend: {	//图例组件
			                data: ['死亡人数']
			            },
						color:['#FD5C50'],
			            grid: {
			                left: '3%',
			                right: '3%',
			                bottom: '8%',
			                containLabel: true,
			            },
						dataZoom: [{
						        type: 'inside'
						    }, {
						        type: 'slider',
								textStyle:false
						    }],
			            xAxis: [
			                {
			                    type: 'category',
								data: this.statistical.deadPositions,
								axisLabel: {
									interval: 0,
									formatter:function(value){  
										var str = ""; 
										var num = 6; //每行显示字数 
										var valLength = value.length; //该项x轴字数  
										var rowNum = Math.ceil(valLength / num); // 行数  
										if(rowNum > 1) {
											for(var i = 0; i < rowNum; i++) {
												var temp = "";
												var start = i * num;
												var end = start + num;
												temp = value.substring(start, end) + "\n";
												str += temp; 
											}
											return str;
										} else {
											return value;
										} 
									}
								}
			                }
			            ],
			            yAxis: [
			                {
			                    type: 'value'
			                }
			            ],
			            series: [
							{
							    name: '死亡人数',
							    type: 'bar',
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.deads
							},
							{
			                    name: '死亡人数',
			                    type: 'line',
								smooth: true,
			                    emphasis: {
			                        focus: 'series'
			                    },
			                    data: this.statistical.deads
			                },
			            ]
			    };
			    return option;
			},
			getInfoTimeOption(){
			    let option = {
			        tooltip: {	//提示框组件
			                trigger: 'axis',
			                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
			                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			                }
			            },
			            legend: {	//图例组件
			                data: ['事故数','经济损失数','歇工天数']
			            },
						color:['#40C4FF','#FF9800', '#FF3E80'],
			            grid: {
			                left: '3%',
			                right: '3%',
			                bottom: '8%',
			                containLabel: true,
			            },
						dataZoom: [{
						        type: 'inside'
						    }, {
						        type: 'slider',
								textStyle:false
						    }],
			            xAxis: [
			                {
			                    type: 'category',
								data: this.statistical.times,
								axisLabel: {
									interval: 0,
									rotate:-90
								}
			                }
			            ],
			            yAxis: [
			                {
			                    type: 'value'
			                }
			            ],
			            series: [
			                {
			                    name: '歇工天数',
			                    type: 'line',
								smooth: true,
			                    emphasis: {
			                        focus: 'series'
			                    },
			                    data: this.statistical.dayWorks
			                },
							{
							    name: '经济损失数',
							    type: 'line',
								smooth: true,
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.loseMoneys
							},
							{
							    name: '事故数',
							    type: 'line',
								smooth: true,
							    emphasis: {
							        focus: 'series'
							    },
								data: this.statistical.accidents
							}
			            ]
			    };
			    return option;
			},
			sizeChange(size) {
                this.pagedata.pageSize = size
                this.pagedata.fromPage = 1
                this.queryDetail(this.currentPosition,this.currentType)
            },
            pageChange(pagenum) {
                this.pagedata.fromPage = pagenum
                this.queryDetail(this.currentPosition,this.currentType)
            },
			queryDetail(position,type){
				this.currentPosition = position;
				this.currentType = type;
				this.loading = true;
				this.model1 = true;
				var orgId = "";
				if(this.dataToQuery.companyId != ""&& this.dataToQuery.companyId != undefined){
					orgId = this.dataToQuery.companyId
				}
				else{
					orgId = sessionStorage('userId').getObject('userId').companyId;
				}
				let data = {
					startPage: this.pagedata.fromPage,
					size: this.pagedata.pageSize,
					orgId: orgId
				};
				if(type == "经济损失")
					data.type = "0";
				else if(type == "重伤人数"){
					data.type = "1";
					data.injuryLevels = "1000001019000000002"
				}
				else if(type == "死亡人数"){
					data.type = "2";
					data.injuryLevels = "1000001019000000003"
				}
				data.position = position;	
				let url = Api.briefing
				this.$http.get(url, {params: data}).then((res) => {
					this.detailData = res.data.data.data;
					this.pagedata.total = res.data.data.totalSize;
					this.loading = false;
				}).catch(e => {
					this.$Message.error("数据获取失败")
				})
			}
        }
    }
</script>
<style scoped>
    /deep/ .table-box .ivu-table-header th{position: static;border: 1px solid #ddd;}
</style>
